<template>
  <div class="app-container">
    <div class="filter-container">

        <el-row>
              <el-col :span="3" style="margin-right:10px;">
                <el-select @change="selectYear" v-model="query.year" placeholder="请选择年份">
                  <el-option v-for="(item, key) in year" :key="key" :label="item" :value="item"></el-option>
                </el-select>
              </el-col>
              <el-col :span="3" style="margin-right:10px;">
                <el-select @change="selectDay" clearable v-model="query.month" placeholder="选择月份">
                  <el-option v-for="(item, key) in days" :key="key" :label="item" :value="item"></el-option>
                </el-select>
              </el-col>
        </el-row>
    </div>
    <div id="myChart" :style="{ width: '100%', height: '500px' }"></div>
  </div>
</template>

<script>
  import { getGd } from '@/api/api'
  // 引入基本模板
  var echarts = require('echarts/lib/echarts')
  // 引入柱状图组件
  require('echarts/lib/chart/bar')
  // 引入提示框和title组件
  require('echarts/lib/component/tooltip')
  require('echarts/lib/component/title')
  require('echarts/lib/component/legend')

  export default {
    data() {
      return {
        year: [],
        days: [],
        timeDate: [],
        listLoading: true,
        query: {
          year: '',
          month: ''
        },
        // 数据
        detectionCount: '', // 检测项目总数量
        detectionCountOne: '', // 检测项目合格数
        detectionCountTwo: '', // 检测项目不合格数
        chargeCountOne: '', // 充电桩直流
        chargeCountTwo: '' // 充电桩交流
      }
    },
    methods: {
      getYear() {
        getGd(this.query).then(response => {
          this.days = response.dayArr
          this.year = response.yearArr
          this.detectionCount = response.data.detectionCount
          this.detectionCountOne = response.data.detectionCountOne
          this.detectionCountTwo = response.data.detectionCountTwo
          this.chargeCountOne = response.data.chargeCountOne
          this.chargeCountTwo = response.data.chargeCountTwo
          this.timeDate = response.timeDate

          this.drawLine()
        })
      },
      selectYear() {
        this.getYear()
      },
      selectDay() {
        this.getYear()
      },
      // 画图
      drawLine() {
        // 基于准备好的 demo, 初始化 echarts 实例
        var myChart = echarts.init(document.getElementById('myChart'))
        // 绘制图表
        myChart.setOption({
          title: { text: '检测数据统计' },
          tooltip: {
            trigger: 'axis',
            axisPointer: { type: 'shadow' }
          },
          legend: {
            data: ['交流桩', '直流桩', '总数', '合格', '不合格']
          },
          gird: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
          },
          xAxis: [
            { type: 'category', data: this.timeDate }
          ],
          yAxis: [
            { type: 'value' }
          ],
          series: [
            { name: '交流桩', type: 'bar', data: this.chargeCountTwo },
            { name: '直流桩', type: 'bar', data: this.chargeCountOne },
            { name: '总数', type: 'bar', data: this.detectionCount },
            { name: '合格', type: 'bar', data: this.detectionCountOne },
            {
              name: '不合格',
              type: 'bar',
              data: this.detectionCountTwo,
              markLine: {
                lineStyle: { normal: { type: 'dashed' }},
                data: [
                  [{ type: 'min' }, { type: 'max' }]
                ]
              }
            }
          ]
        })
      },
      initDate() {
        var date = new Date()
        var year = date.getFullYear()
        var month = date.getMonth() + 1
        month = (month < 10 ? '0' + month : month)
        this.query.year = year
        this.query.month = month
      }
    },
    mounted() {
      this.initDate()
      this.getYear()
    }
  }
</script>

<style>

</style>
